<template>
	<view class="display-flex-between header-con" :style="{'background-color': bgc}">
		<view class="back">
			<i v-if="backFlag" class="iconfont icon-back display-flex" @click="handleBack"></i>
		</view>
		<view class="middle"><slot>肤质检测报告</slot></view>
		<view class="right-text display-flex" Data-btname="再测一次" @click.native="handleRight">{{rightText}}</view>
	</view>
</template>

<script>
export default {
  props: {
    backFlag: {
      type: Boolean,
      default: true
    },
    rightText:{
      type: String,
      default:''
    },
    bgc: {
      type: String,
      default: ''
    }
  },
  methods: {
    handleBack() {
	  this.$common.back();
      //uni.navigateBack()
    },
    handleRight(e){
      this.$emit('click',e)
    }
  },
}
</script>

<style lang="scss" scoped>
.header-con {
	box-sizing: border-box;
	height: 55px;
	width: 100%;
	padding: 0 30rpx;
  position: fixed;
  z-index: 10;
  top: -1px;
  background-color: #FFF7F7;
	.back {
		width:120rpx;
		font-size: 20px;
		color: #333;
	}
  .middle{
    flex: 1;
    text-align: center;
  }
  .right-text{
    justify-content: flex-end;
    width:120rpx;
  }
}
</style>